import React, { createContext, useContext } from "react";
// useContext只是用来简化Consumer的接收的

const context1 = createContext();
const context2 = createContext();

const Child2 = () => {
  // 可以接收一个参数，是context对象
  // 返回值就是context对象的Provider组件的value对象
  const { name } = useContext(context1);
  const { nickname } = useContext(context2);
  return (
    <div>
      child2组件 - {name} - {nickname}
      {/* <context1.Consumer>
        {(value) => {
          return (
            <span>
              {value.name} -{" "}
              <context2.Consumer>
                {(val) => <span>{val.nickname}</span>}
              </context2.Consumer>
            </span>
          );
        }}
      </context1.Consumer> */}
    </div>
  );
};

const Child1 = () => {
  return (
    <context2.Provider
      value={{
        nickname: "xiaosan",
      }}
    >
      <div>child1组件</div>
      <Child2 />
    </context2.Provider>
  );
};

const App = () => {
  return (
    <context1.Provider
      value={{
        name: "zhangsan",
      }}
    >
      <h2>useContext</h2>
      <Child1 />
    </context1.Provider>
  );
};

export default App;
